<!--
 * @Description: 散点图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020年8月31日 17:16:18
 * @LastEditTime: 2020-09-04 09:13:32
-->
<template>
    <ScreenContainer class="scatterCharts demo">
        <!-- 标准散点图 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="标准散点图"
                          xName="身高"
                          yName="体重" />
        </div>
        <!-- 标注 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="标注"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          :markPoint="markPoint" />
        </div>
        <!-- 标线 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="标线"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          :markLine="markLine" />
        </div>
        <!-- 标域 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="标域"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          :markArea="markArea" />
        </div>
        <!-- 其他配置项测试 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="其他配置项测试"
                          xName="身高"
                          yName="体重/kg"
                          xValEnding="cm"
                          :tooltipFmt="tooltipFmt"
                          :yAxisDegreeScope="{min:40,max:100}"
                          :colors="['#f99e54','#ff5722']" />
        </div>
        <!-- 显示数据值 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="显示数据值"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          label />
        </div>
        <!-- 视觉映射 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="视觉映射"
                          xName="身高"
                          yName="体重/kg"
                          right="80"
                          :legend="{right:'center',y:37}"
                          :tooltipFmt="tooltipFmt"
                          :visualMap="visualMap" />
        </div>
        <!-- 横向滚动条 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="横向滚动条"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          :dataZoom="dataZoom1" />
        </div>
        <!-- 纵向滚动条 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter1"
                          title="纵向滚动条"
                          xName="身高"
                          yName="体重/kg"
                          :tooltipFmt="tooltipFmt"
                          :dataZoom="dataZoom2" />
        </div>
        <!-- 负值测试 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter2"
                          title="负值测试" />
        </div>
        <!-- 气泡图 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter2"
                          :symbolSize="symbolSize1"
                          title="气泡图" />
        </div>
        <!-- 三维气泡图 -->
        <div class="box">
            <ScatterChart :apiMethod="getData"
                          apiParam="getScatter3"
                          :symbolSize="symbolSize2"
                          :itemStyles="itemStyles"
                          title="三维气泡图" />
        </div>
    </ScreenContainer>
</template>

<script>
import echarts from 'echarts'
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import ScatterChart from '@/components/charts/default/scatterChart.vue' //柱状图
export default {
    name: 'scatterCharts',
    components: {
        ScatterChart,
        ScreenContainer,
    },
    data() {
        return {
            getData, //api方法
            markPoint: {
                //标注
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' },
                ],
            },
            tooltipFmt: (params) => {
                let fmt = ''
                params.forEach((item, index) => {
                    fmt += `${params[index].seriesName} : ${params[index].value[0]}cm ${params[index].value[1]}kg<br/>`
                })
                return fmt
            },
            markLine: {
                lineStyle: {
                    normal: {
                        type: 'solid',
                    },
                },
                data: [
                    {
                        type: 'average',
                        name: '平均值',
                    },
                    {
                        xAxis: 160,
                    },
                ],
            },
            markArea: {
                //标域
                label: {
                    position: 'right',
                },
                data: [
                    [
                        {
                            name: '标域',
                            yAxis: '80',
                        },
                        {
                            yAxis: '100',
                        },
                    ],
                ],
            },
            visualMap: {
                top: 40,
                right: 0,
                pieces: [
                    {
                        lte: 30,
                    },
                    {
                        gt: 30,
                        lte: 40,
                    },
                    {
                        gt: 40,
                        lte: 60,
                    },
                    {
                        gt: 60,
                        lte: 80,
                    },
                    {
                        gt: 80,
                        lte: 100,
                    },
                ],
            },
            dataZoom1: {
                //横向滚动条
                xAxisIndex: [0], //滚动数据源，这里默认第一条X轴
                minValueSpan: 5, //最小显示到的数据量下标，1为2单位数据量
                maxValueSpan: 10, //最大显示到的数据量下标，3为4单位数据量
            },
            dataZoom2: {
                //纵向滚动条
                yAxisIndex: [0],
                start: 0, //滚动条默认显示当前轴数据范围，start为起始值，end为结束值，这里为百分比，最小0，最大100
                end: 80,
            },
            symbolSize1: (value) => {
                var radius = ((value[value.length - 1] - 0) * 22) / 100 + 5
                return Math.max(Math.round(radius), 10) || 10
            },
            symbolSize2: (value) => {
                return Math.sqrt(value[value.length - 1]) / 5
            },
            itemStyles: [
                {
                    shadowBlur: 15,
                    shadowColor: 'rgba(251, 118, 123, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                        {
                            offset: 0,
                            color: 'rgb(251, 118, 123)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(204, 46, 72)',
                        },
                    ]),
                },
                {
                    shadowBlur: 10,
                    shadowColor: 'rgba(129, 227, 238, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                        {
                            offset: 0,
                            color: 'rgb(129, 227, 238)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(25, 183, 207)',
                        },
                    ]),
                },
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 25%;
        height: 33.333%;
    }
}
</style>
